<template>
    <el-form label-width="10%" :style="formCols" style="margin-top: 30px">
        <el-form-item v-for="(item, index) in formBuildList" :label="item.labelName">
            <component :is="item.component" :isEdit="false" :properties="item"/>
        </el-form-item>
    </el-form>

    <div class="formSubmitButton">
        <el-button @click="cancelStartFlow()">取消</el-button>
        <el-button type="primary" :loading="submitStartInstanceLoading" @click="submitStartInstance()">提交流程</el-button>
    </div>
</template>

<script>
import {queryFlowFormInfo, startFlowInstance} from "@/request/flow";
import {ElNotification} from "element-plus";

export default {
    name: "StartFlowInstance",
    data() {
        return {
            formBuildList: [],
            globalProperties: {
                colNum: 1
            },
            submitStartInstanceLoading: false
        }
    },
    methods: {
        cancelStartFlow() {
            // 关闭当前窗口
            window.close();
        },
        submitStartInstance() {
            this.submitStartInstanceLoading = true;
            // 构建表单实例参数
            let formInstanceJson = {};
            for (let index = 0; index < this.formBuildList.length; index++) {
                let itemInfo = this.formBuildList[index];
                if (!itemInfo.bindValue) {
                    break;
                }
                formInstanceJson[itemInfo.id] = itemInfo.bindValue;
                if (typeof formInstanceJson[itemInfo.id] !== 'string') {
                    formInstanceJson[itemInfo.id] = "" + formInstanceJson[itemInfo.id]
                }
            }
            // 发起流程实例
            let currentFlowId = this.$route.query.id;
            let param = {
                flowId: currentFlowId,
                formInstanceJson: JSON.stringify(formInstanceJson)
            }
            startFlowInstance(param).then(res => {
                if (res.code === "200") {
                    ElNotification({
                        title: 'Success',
                        message: res.message,
                        type: 'success'
                    })
                    // 延迟一秒关闭窗口
                    setTimeout(() => {
                        this.submitStartInstanceLoading = false
                        window.close();
                    }, 1000);
                }
            }).catch(res => {
                this.submitStartInstanceLoading = false;
            })

        }
    },
    computed: {
        formCols() {
            let res = "display: grid;gap: 16px;"
            let repeat = `grid-template-columns: repeat(${this.globalProperties.colNum}, 1fr);`
            return res + repeat;
        }
    },
    created() {
        // 获取请求url中携带的流程ID
        let currentFlowId = this.$route.query.id;
        // 根据流程ID查询表单信息
        queryFlowFormInfo({id: currentFlowId}).then(res => {
            if (res.code === "200") {
                let formJson = res.data.formJson
                // 序列化json
                let jsonInfo = JSON.parse(formJson);
                this.globalProperties = jsonInfo.globalProperties
                this.formBuildList = jsonInfo.componentJson
            }
        })
    }
}
</script>

<style scoped lang="less">
.formSubmitButton {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>